<template>
	<view>
		<view class="uni-list-item" @click="navToDetailPage">
			<view class="uni-list-item__extra">
				<image class="leftimg" :src="tempiteminfo.image" mode="aspectFill"></image>
			</view>
			<view class="uni-list-item__content">
				<view class="title">{{tempiteminfo.name}}</view>
				<view class="kc">
					<view class="byy">已售{{tempiteminfo.sales}}件</view>
					<view>仅剩{{tempiteminfo.stock}}件</view>
				</view>
				<view class="jg">
					<text class="now">¥{{tempUserType==0?tempiteminfo.price:tempiteminfo.agentPrice}}</text>
					<text class="old" v-if="tempUserType==1">¥{{tempiteminfo.price}}</text>
					<image @tap.stop="addCart" class="icon-cart" src="../static/index/cart.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const appinit = getApp();
	export default {
		name: 'indproitem',
		data() {
			return {
				tempiteminfo: this.iteminfo,
				tempUserType: this.usertype,
			}
		},
		props: {
			iteminfo: Object,
			usertype: String
		},
		methods: {
			//-----------------------------------点击-------------------------------
			//详情页
			navToDetailPage() {
				let id = this.tempiteminfo.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			//加入购物车
			addCart: function() {
				let than = this;
				if (uni.getStorageSync('userInfo')) {
					than.$api.addCartF(this.tempiteminfo.id, 1, uni.getStorageSync('userInfo').userCode);
				} else {
					than.$api.msg('请先登陆');
				}
			},
			// onClick() {
			// 	this.$emit('click')
			// },
			// onSwitchChange(e) {
			// 	this.$emit('switchChange', e.detail)
			// }
		},
		watch: {
			usertype: function(newQuestion, oldQuestion) {
				this.tempUserType = newQuestion;
			}
		}
	}
</script>

<style lang="scss">
	.uni-list-item {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		overflow: hidden;
		padding: 20rpx;
	}

	.uni-list-item__extra {
		float: left;
	}

	.leftimg {
		width: 210rpx;
		height: 210rpx;
		overflow: hidden;
		border-radius: 10rpx;
		float: left;
	}

	.uni-list-item__content {
		width: calc(100% - 242rpx);
		float: right;

		.title {
			width: 100%;
			height: 50rpx;
			font-size: 32rpx;
			font-weight: bold;
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			margin-bottom: 8rpx;
		}

		.kc {
			width: 300rpx;
			height: 40rpx;
			line-height: 38rpx;
			border: 2rpx solid #FA436A;
			background-color: #fff;
			font-size: 22rpx;
			border-radius: 100rpx;
			overflow: hidden;

			view {
				width: 50%;
				height: 100%;
				text-align: center;
				float: left;
				color: #fff;
				background-color: #FA436A;
			}

			.byy {
				color: #FA436A !important;
				background-color: #fff !important;
			}
		}

		.jg {
			margin-top: 62rpx;

			.now {
				color: #FA436A;
				font-size: 36rpx;
				font-weight: bold;
			}

			.old {
				text-decoration: line-through;
				color: #C0C4CC;
				font-size: 24rpx;
				margin-left: 10rpx;
			}

			.icon-cart {
				width: 56upx;
				height: 56upx;
				float: right;
			}
		}
	}
</style>
